{% extends "dash/base_dash.html" %}

{% load dash_filters %}


{% block mystylesheet %}
    <link rel="stylesheet" href="/mymedia/css/style-icon-images.css" type="text/css" />
    {% block mystylesheet-dashboard %}{% endblock mystylesheet-dashboard%}
{% endblock mystylesheet%}


{% block menuOptionsSelected %}
    <ul class="menu-options">
        <li class="menu-item-selected"><a href="/dash/dashboard/">Dashboard</a></li>
        <li class="menu-item"><a href="/dash/logbook/">Logbook</a></li>
        <li class="menu-item"><a href="/dash/topicos/">Topicos</a></li>
    </ul>
{% endblock menuOptionsSelected %}


{% block messages %}

{% endblock messages %}


{% block dashboard %}
    <div class="dashboard-list-topics">
        <ul class="list-topics">
            {% for topic in r_topics %}
                <li>
                    {% if topic in user.persona.topicos.all %}
                        <a href="/dash/dashboard/{{ topic.id }}">
                            <div class="list-item-topico list-item-topico-{{ topic|unicode|split:" "|first|lower }}" title="{{ topic|unicode|split:" "|first }}"></div>
                        </a>
                    {% else %}
                        <div class="list-item-topico un-list-item-topico-{{ topic|unicode|split:" "|first|lower }}" title="{{ topic|unicode|split:" "|first }}"></div>
                    {% endif %}
                </li>
            {% endfor %}
            <li>
                <a href="/dash/dashboard/">
                    <div class="list-item-topico list-item-topico-all" title="Todos"></div>
                </a>
            </li>
        </ul>
    </div>
    <div class="dashboard-list-items">
        {% for items in topicos %}
            {% for item in items %}
                <div class="item-content">
                    <div class="item-header">
                        <div class="item-topico item-topico-{{ item.topico|unicode|split:" "|first|lower }}" title="{{ item.topico|unicode|split:" "|first }}"></div>
                        <div class="item-nombre"><a href="/items/item/{{ item.id }}">{{ item }}</a></div>
                        <div class="item-score" title="Cantidad de fans">
                            <img src="/mymedia/images/dashboard-content-item-header-score.png" class="item-score-image" alt="Score">
                            {{ item.cantidad_fans }}
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="item-body">
                        <div class="item-image" title="Imagen ilustrativa del item">
                            {% if item.mis_imagenes.count %}
                                <img src="{{ item.first_image }}" alt="Score">
                            {% else %}
                                <img src="/mymedia/images/298.png" alt="Score">
                            {% endif %}
                        </div>
                        <div class="item-descripcion" title="Descripcion del item">{{ item.descripcion|truncatewords:70 }}</div>
                        <div class="clear"></div>
                    </div>
                    <div class="item-footer">
                        <div class="item-topico">{{ item.topico }}</div>
                        <div class="item-buttons">
                            <a href="/items/fan/{{ item.id }}" title="Hazte Fan de este item"><img src="/mymedia/images/item-button-fan.png" alt="Fan" /></a>
                            <a href="/items/recomendation/{{ item.id }}" title="Recomendá este item a tus seguidores"><img src="/mymedia/images/item-button-recomendar.png" alt="Recomendar" /></a>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
            {% endfor %}
        {% endfor %}
    </div>
{% endblock dashboard %}


{% block sidebar %}
    <div class="sidebar-content">
        <div class="sidebar-user">
            <div class="user-name">{{ user.first_name }} {{ user.last_name }}</div>
            <div class="user-stars">
                <ul>
                    <li class="user-star"><img src="/mymedia/images/item-ratings.png" alt="Star" /></li>
                    <li class="user-star"><img src="/mymedia/images/item-ratings.png" alt="Star" /></li>
                    <li class="user-star"><img src="/mymedia/images/item-ratings.png" alt="Star" /></li>
                    <li class="user-star"><img src="/mymedia/images/item-ratings.png" alt="Star" /></li>
                    <li class="user-star"><img src="/mymedia/images/item-ratings.png" alt="Star" /></li>
                    <li class="user-star"><img src="/mymedia/images/item-ratings.png" alt="Star" /></li>
                </ul>
            </div>
        </div>
        <div class="sidebar-stadistic">
            <a href="/dash/fans/">
                <div class="stadistic-fan sidebar-stadistic-item" title="Podés consultar de que items sos Fan">
                    <div class="stadistic-num">{{ user.persona.items.count }}</div>
                    <div class="stadistic-nom">Fan{% if user.persona.items.count > 1 %}s{% endif %}</div>
                </div>
            </a>
            <a href="/dash/recomendated/">
                <div class="stadistic-recomendations sidebar-stadistic-item" title="Podés consultar cuantas recomendaciones hiciste y a quien">
                    <div class="stadistic-num">
                        {{ user.recomendaciones_enviadas.count }}
                    </div>
                    <div class="stadistic-nom">Mis recomendaciones</div>
                </div>
            </a>
            <a href="/dash/comments/">
                <div class="stadistic-comments sidebar-stadistic-item" title="Podés consultar los items que has comentado">
                    <div class="stadistic-num">{{ user.comentarios_realizados.count }}</div>
                    <div class="stadistic-nom">Comentario{% if user.comentarios_realizados.count > 1 %}s{% endif %}</div>
                </div>
            </a>
        </div>
        <div class="sidebar-menu-indicators">
            <a href="/social/messages/">
                <div class="menu-indicators" title="Revisá tus mensajes recibidos y enviados"><div class="mini-img-msg"></div>Mensajes
                    {% if mensajes_nolidas > 0 %}({{ mensajes_nolidas }}){% endif %}
                </div>
            </a>
            <a href="/social/eventos/">

                <div class="menu-indicators" title="Revisá los eventos que creaste y a los cuales estas invitado"><div class="mini-img-event"></div>Eventos
                    {% if eventos_nolidas > 0 %}({{ eventos_nolidas }}){% endif %}
                </div>
            </a>
            <a href="/social/user_main_notification/">
                <div class="menu-indicators" title="Revisá cuales son tus notificaciones de parte de tus productos favoritas"><div class="mini-img-notify"></div>Notificaciones
                    {% if notificaciones_nolidas > 0 %}({{ notificaciones_nolidas }}){% endif %}
                </div>
            </a>
            <a href="/dash/recomendation/">
                <div class="menu-indicators" title="Revisá las recomendaciones que te hicieron los usuarios que seguís"><div class="mini-img-recom"></div>Recomendaciones
                    {% if recomendaciones_noleidas > 0 %}({{ recomendaciones_noleidas }}){% endif %}
                </div>
            </a>
        </div>
        <div class="sidebar-new-item">
            {% block crear %}
                <a href="/items/item/register/"><div class="new-item-buttom" title="Crea un item del topico que gustes">Crear Item</div></a>
            {% endblock %}
        </div>
        <div class="clear"></div>
    </div>
{% endblock sidebar %}
